<template>
  <div class="order-manage-container">
    <h1 class="page-title">💰 订单管理</h1>

    <!-- 搜索栏 -->
    <el-card class="search-card">
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="订单号">
          <el-input v-model="searchForm.orderNo" placeholder="请输入订单号" clearable></el-input>
        </el-form-item>
        <el-form-item label="用户姓名">
          <el-input v-model="searchForm.userName" placeholder="请输入用户姓名" clearable></el-input>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select v-model="searchForm.status" placeholder="请选择" clearable>
            <el-option label="全部" value=""></el-option>
            <el-option label="待付款" value="unpaid"></el-option>
            <el-option label="待发货" value="pending"></el-option>
            <el-option label="已发货" value="shipped"></el-option>
            <el-option label="已完成" value="finished"></el-option>
            <el-option label="已取消" value="cancelled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="下单日期">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 订单列表 -->
    <el-card style="margin-top: 20px;">
      <el-table :data="orderList" v-loading="loading" stripe>
        <el-table-column prop="orderNo" label="订单号" width="180"></el-table-column>
        <el-table-column prop="userName" label="用户"></el-table-column>
        <el-table-column prop="productName" label="商品/宠物" show-overflow-tooltip></el-table-column>
        <el-table-column prop="quantity" label="数量" width="80"></el-table-column>
        <el-table-column prop="amount" label="金额">
          <template slot-scope="scope">
            <span class="price">¥{{ scope.row.amount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.statusName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="下单时间" width="160"></el-table-column>
        <el-table-column label="操作" width="250" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleView(scope.row)">
              详情
            </el-button>
            <el-button size="mini" type="success" @click="handleShip(scope.row)"
                       v-if="scope.row.status === 'pending'">
              发货
            </el-button>
            <el-button size="mini" type="warning" @click="handleFinish(scope.row)"
                       v-if="scope.row.status === 'shipped'">
              完成
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-wrapper">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total">
        </el-pagination>
      </div>
    </el-card>

    <!-- 订单详情对话框 -->
    <el-dialog title="订单详情" :visible.sync="detailDialogVisible" width="700px">
      <el-descriptions :column="2" border v-if="currentOrder">
        <el-descriptions-item label="订单号" :span="2">{{ currentOrder.orderNo }}</el-descriptions-item>
        <el-descriptions-item label="用户姓名">{{ currentOrder.userName }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ currentOrder.phone }}</el-descriptions-item>
        <el-descriptions-item label="商品名称">{{ currentOrder.productName }}</el-descriptions-item>
        <el-descriptions-item label="数量">{{ currentOrder.quantity }}</el-descriptions-item>
        <el-descriptions-item label="单价">¥{{ currentOrder.unitPrice }}</el-descriptions-item>
        <el-descriptions-item label="总金额">
          <span class="price">¥{{ currentOrder.amount }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="订单状态">
          <el-tag :type="getStatusType(currentOrder.status)">{{ currentOrder.statusName }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="下单时间">{{ currentOrder.createTime }}</el-descriptions-item>
        <el-descriptions-item label="收货地址" :span="2">{{ currentOrder.address }}</el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">{{ currentOrder.remark || '无' }}</el-descriptions-item>
      </el-descriptions>
      <div slot="footer">
        <el-button @click="detailDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 发货对话框 -->
    <el-dialog title="订单发货" :visible.sync="shipDialogVisible" width="500px">
      <el-form :model="shipForm" label-width="100px">
        <el-form-item label="物流公司">
          <el-select v-model="shipForm.expressCompany" placeholder="请选择物流公司" style="width: 100%">
            <el-option label="顺丰速运" value="sf"></el-option>
            <el-option label="圆通快递" value="yt"></el-option>
            <el-option label="中通快递" value="zt"></el-option>
            <el-option label="申通快递" value="st"></el-option>
            <el-option label="韵达快递" value="yd"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="物流单号">
          <el-input v-model="shipForm.expressNo" placeholder="请输入物流单号"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="shipDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmitShip">确认发货</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'OrderManage',
  data () {
    return {
      searchForm: {
        orderNo: '',
        userName: '',
        status: '',
        dateRange: null
      },
      orderList: [],
      loading: false,
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      detailDialogVisible: false,
      shipDialogVisible: false,
      currentOrder: null,
      shipForm: {
        expressCompany: '',
        expressNo: ''
      }
    }
  },
  created () {
    this.loadOrderList()
  },
  methods: {
    loadOrderList () {
      // 模拟数据 - 将来对接 GET /api/order/list
      this.loading = true
      setTimeout(() => {
        this.orderList = [
          {
            id: 1,
            orderNo: 'ORD202401250001',
            userName: '张三',
            phone: '13800138000',
            productName: '高级狗粮5kg',
            quantity: 2,
            unitPrice: 199,
            amount: 398,
            status: 'pending',
            statusName: '待发货',
            createTime: '2024-01-25 14:30',
            address: '北京市朝阳区xxx街道xxx号',
            remark: ''
          },
          {
            id: 2,
            orderNo: 'ORD202401240002',
            userName: '李四',
            phone: '13900139000',
            productName: '柯基犬',
            quantity: 1,
            unitPrice: 3000,
            amount: 3000,
            status: 'shipped',
            statusName: '已发货',
            createTime: '2024-01-24 10:00',
            address: '上海市浦东新区xxx路xxx号',
            remark: ''
          }
        ]
        this.pagination.total = 35
        this.loading = false
      }, 500)
    },
    handleSearch () {
      console.log('搜索', this.searchForm)
      this.loadOrderList()
    },
    handleReset () {
      this.searchForm = { orderNo: '', userName: '', status: '', dateRange: null }
      this.loadOrderList()
    },
    handleView (row) {
      // 将来对接接口 GET /api/order/detail/{id}
      this.currentOrder = row
      this.detailDialogVisible = true
    },
    handleShip (row) {
      this.currentOrder = row
      this.shipForm = {
        expressCompany: '',
        expressNo: ''
      }
      this.shipDialogVisible = true
    },
    handleSubmitShip () {
      if (!this.shipForm.expressCompany || !this.shipForm.expressNo) {
        this.$message.warning('请填写完整的物流信息')
        return
      }
      // 将来对接接口 PUT /api/order/status/{id}
      this.$message.success('发货成功')
      this.shipDialogVisible = false
      this.loadOrderList()
    },
    handleFinish (row) {
      this.$confirm('确认该订单已完成吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 将来对接接口 PUT /api/order/status/{id}
        this.$message.success('订单已完成')
        this.loadOrderList()
      })
    },
    getStatusType (status) {
      const typeMap = {
        'unpaid': 'warning',
        'pending': 'primary',
        'shipped': 'success',
        'finished': 'info',
        'cancelled': 'danger'
      }
      return typeMap[status] || 'info'
    },
    handleSizeChange (val) {
      this.pagination.pageSize = val
      this.loadOrderList()
    },
    handleCurrentChange (val) {
      this.pagination.currentPage = val
      this.loadOrderList()
    }
  }
}
</script>

<style scoped>
.order-manage-container {
  padding: 20px;
}

.page-title {
  margin: 0 0 20px 0;
  font-size: 24px;
  color: #333;
}

.search-card {
  margin-bottom: 20px;
}

.price {
  color: #f56c6c;
  font-weight: bold;
}

.pagination-wrapper {
  margin-top: 20px;
  text-align: right;
}
</style>
